<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      label-width="150px"
      ref="form"
      class="kylin-form"
    >
      <el-form-item :label="$t('name')" prop="name">
        <el-input v-model="form.name" disabled autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="$t('configure.configure_value')" prop="baseline">
        <el-input v-model="form.baseline" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button class="kylin-button" @click="handleOk">{{
        $t("save")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import { getConfigure, updateConfigure } from "@/api/configure_group";
export default {
  props: {
    row_id: {
      type: String | Number,
    },
  },
  data() {
    return {
      form: {
        name: "",
        baseline: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: this.$t("configure.configure_name_require"),
            trigger: "change",
          },
        ],
        baseline: [
          {
            required: true,
            message: this.$t("configure.configure_value_require"),
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    getConfigure({ configId: this.row_id }).then((res) => {
      let data = res.data.data;
      this.form.name = data.name;
      this.form.baseline = data.baseline;
    });
  },
  methods: {
    handleCancel() {
      this.$refs.form.resetFields();
      this.$emit("click");
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          updateConfigure({
            value: this.form.baseline,
            configId: this.row_id,
          }).then((res) => {
            if (res.data.code === "0") {
              this.$message({
                type: "success",
                message: res.data.message,
              });
              this.$emit("click", "success");
              this.$refs.form.resetFields();
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          });
        }
      });
    },
  },
};
</script>

<style>
</style>